<template>
    <div>
        <el-breadcrumb separator="/">
             <el-breadcrumb-item>个人办公</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>我的办公桌</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 用户列表主体部分 -->
        <el-card>
            <!-- 搜索区域 -->
            <el-row :gutter="25"><!--gutter 间隙 col:列宽 --> 
              <el-col :span="10">
                  <el-input  placeholder="请输入搜索内容" v-model="queryInfo.query" clearable @clear="getUserList()">
                        <el-button slot="append" icon="el-icon-search"  type="button" @click="getUserList()"></el-button>
                  </el-input>
              </el-col>
               <el-col :span="4">
                  <el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
               </el-col>
            </el-row>
            <!-- 用户列表 border :边框，stripe：隔行变色-->
            <el-table  :data="userList"  border stripe>
                <el-table-column   type="index">  </el-table-column><!--索引列 -->
                <el-table-column   prop="id" label="用户id"> </el-table-column>
                <el-table-column   prop="username" label="姓名"> </el-table-column>
                <el-table-column   prop="usemail"  label="邮箱"> </el-table-column>
                <el-table-column   prop="email"  label="手机"> </el-table-column>
                <el-table-column   prop="status"  label="用户状态"> </el-table-column>
                <el-table-column   prop="cretime"  label="创建时间"> </el-table-column>
                <el-table-column  prop="updtime"  label="修改时间"> </el-table-column>
                 <el-table-column  prop="userAddress"  label="地址"> 
                     <!-- 作用域插槽 el-switch:选择性插槽（放在数据标签里面） -->
                   <template slot-scope="scope">   
                     <!-- 每一行封存的数据 -->
                        <el-tag v-if="scope.row.ustatus == 0" @change="userStatusChange(scope.row)">正常</el-tag>
                        <el-tag v-if="scope.row.ustatus == 1" @change="userStatusChange(scope.row)">禁用</el-tag>
                        <el-tag v-if="scope.row.ustatus == 2" @change="userStatusChange(scope.row)">锁定</el-tag>
                  </template>   
                </el-table-column>
                <el-table-column prop=""  label="操作"> 
                    <template slot-scope="scope">
                            <!-- 修改 -->
                            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.user_id)"></el-button>
                            <!-- 删除 -->
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteUserInfo(scope.row.user_id)"></el-button>
                    </template>
                </el-table-column>
        </el-table>
        <!-- 分页  size-change：每页最大变化，current-change：当前最大变化，layout：布局组件-->
          <div class="block">
            <el-pagination @size-change="handleSizeChange"  
                           @current-change="handleCurrentChange"  
                          :current-page="queryInfo.pageNum" 
                          :page-sizes="[1, 2, 20, 100]" 
                          :page-size="queryInfo.pageSize"  layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </el-card> 
        <!-- 新增用户 -->
        <el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClose">
            <!-- addFormRef:校验规则存放位置 -->
             <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
                <el-form-item label="用户名" prop="username"><el-input v-model="addForm.username" placeholder="请输入用户名"></el-input> </el-form-item>
                <el-form-item label="密码"   prop="password"><el-input v-model="addForm.password" placeholder="请输入密码"></el-input> </el-form-item>
                <el-form-item label="邮箱号" prop="usemail"><el-input v-model="addForm.usemail" placeholder="请输入邮箱号"></el-input> </el-form-item>
                <el-form-item label="手机号" prop="umobile"><el-input v-model="addForm.umobile" placeholder="请输入手机号"></el-input> </el-form-item>
                <el-form-item label="账户状态" prop="ustatus"><el-input v-model="addForm.ustatus" placeholder="请输入账户状态"></el-input> </el-form-item>
                <el-form-item label="删除状态" prop="udelete"><el-input v-model="addForm.udelete" placeholder="请输入删除状态"></el-input> </el-form-item>
                <el-form-item label="创建时间" prop="cretime"><el-input v-model="addForm.cretime" placeholder="请输入创建时间"></el-input> </el-form-item>
                <el-form-item label="修改时间" prop="updtime"><el-input v-model="addForm.updtime" placeholder="请输入修改时间"></el-input> </el-form-item>
            </el-form>
            <!-- 内容底部区域 -->
            <span slot="footer" class="dialog-fotter">
                <el-button type="primary" @click="addUser()">确定</el-button>
                <el-button  @click="addDialogVisible=false">取消</el-button>
            </span>
        </el-dialog>
        <!-- 修改用户信息 -->
         <el-dialog title="修改用户信息" :visible.sync="editDialogVisible" width="50%" @close="editDialogClose">
            <!-- addFormRef:校验规则存放位置 -->
             <el-form :model="editUserForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
                 <el-form-item label="用户名" prop="user_id"><el-input v-model="editUserForm.user_id" placeholder="请输入用户名" disabled></el-input> </el-form-item>
                <el-form-item label="用户名" prop="username"><el-input v-model="editUserForm.username" placeholder="请输入用户名" disabled></el-input> </el-form-item>
                <el-form-item label="密码"   prop="password"><el-input v-model="editUserForm.password" placeholder="请输入密码"></el-input> </el-form-item>
                <el-form-item label="邮箱号" prop="usemail"><el-input v-model="editUserForm.usemail" placeholder="请输入邮箱号"></el-input> </el-form-item>
                <el-form-item label="手机号" prop="umobile"><el-input v-model="editUserForm.umobile" placeholder="请输入手机号"></el-input> </el-form-item>
                <el-form-item label="账户状态" prop="ustatus"><el-input v-model="editUserForm.ustatus" placeholder="请输入账户状态"></el-input> </el-form-item>
                <el-form-item label="删除状态" prop="udelete"><el-input v-model="editUserForm.udelete" placeholder="请输入删除状态"></el-input> </el-form-item>
                <el-form-item label="创建时间" prop="cretime"><el-input v-model="editUserForm.cretime" placeholder="请输入创建时间"></el-input> </el-form-item>
                <el-form-item label="修改时间" prop="updtime"><el-input v-model="editUserForm.updtime" placeholder="请输入修改时间"></el-input> </el-form-item>
            </el-form>
            <!-- 内容底部区域 -->
            <span slot="footer" class="dialog-fotter">
                <el-button type="primary" @click="editUser()">确定</el-button>
                <el-button  @click="editDialogVisible=false">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    created(){
        this.getUserList();
    },
    data(){
        return{
            queryInfo:{//封装的查询信息实体
                query:"",//查询信息
                pageNum:1,//当前页
                pageSize:5//每页最大数
            },
             userList:[], //用户列表
             total:0, //总记录数
             addDialogVisible:false, //对话框状态
             editDialogVisible:false,//显示和隐藏修改用户栏
             addForm:{
                    username:'',
                    password:'',
                    usemail:'',
                    umobile:'',
                    udelete:'',
                    cretime:'',
                    updtime:'',
                    ustatus:''
             },
             editUserForm:{ //修改用户信息
                    
            },
            addFormRules: { //添加表单验证
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                ],
                    password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
                ],
                    usemail: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { min: 10, max: 50, message: '长度在 10 到 50 个字符', trigger: 'blur' }
                ],
                    umobile: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min: 11, max: 11, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                ],
                    udelete: [
                    { required: true, message: '请输入删除状态 0、1', trigger: 'blur' },
                    { min: 1, max: 1, message: '长度在 1 到 1 个字符', trigger: 'blur' }
                ],
                    cretime: [
                    { required: true, message: '请输入创建时间', trigger: 'blur' },
                    { min: 8, max: 15, message: '长度在 8 到 15 个字符', trigger: 'blur' }
                ],
                    updtime: [
                    { required: true, message: '请输入修改时间', trigger: 'blur' },
                    { min: 3, max: 15, message: '长度在 8 到 15 个字符', trigger: 'blur' }
                ],
                    ustatus: [
                    { required: true, message: '请输入密码状态 0、1或2 ', trigger: 'blur' },
                    { min: 1, max: 1, message: '长度在 1 到 1 个字符', trigger: 'blur' }
                ]
            },
            editFormRules: { //修改表单验证
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                ],
                    password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
                ],
                    usemail: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { min: 10, max: 50, message: '长度在 10 到 50 个字符', trigger: 'blur' }
                ],
                    umobile: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min: 11, max: 11, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                ],
                    udelete: [
                    { required: true, message: '请输入删除状态 0、1', trigger: 'blur' },
                    { min: 1, max: 1, message: '长度在 1 到 1 个字符', trigger: 'blur' }
                ],
                    cretime: [
                    { required: true, message: '请输入创建时间', trigger: 'blur' },
                    { min: 8, max: 15, message: '长度在 8 到 15 个字符', trigger: 'blur' }
                ],
                    updtime: [
                    { required: true, message: '请输入修改时间', trigger: 'blur' },
                    { min: 3, max: 15, message: '长度在 8 到 15 个字符', trigger: 'blur' }
                ],
                    ustatus: [
                    { required: true, message: '请输入密码状态 0、1或2 ', trigger: 'blur' },
                    { min: 1, max: 1, message: '长度在 1 到 1 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods:{
       async getUserList(){//获取所有用户 有数据解析需要使用同步async,await
            const {data:res} =  await this.$http.get("alluser",{params:this.queryInfo}) //将json数据用res接收，并用data来存储
            this.userList = res.data;//用户列表数据封装
            this.total = res.numbers;//总用户数
        },
        handleSizeChange(newSize){//分页最大数
            this.queryInfo.pageSize = newSize;
            this.getUserList();
        },
        handleCurrentChange(newPage){
            this.queryInfo.pageNum = newPage;
            this.getUserList();
        },
        //获取用户信息
      async  userStatusChange(userInfo){
            const {data:res} = await  this.$http.put(`userstate?id=${userInfo.user_id}&status=${userInfo.ustatus}`)
            if(res !="success"){
                userInfo.user_id = !userInfo.user_id;
                return this.$message("操作失败","error")
            }
           this.$message("操作成功......","success")
        },
        addDialogClose(){//监听添加用户的操作
            this.$refs.addFormRef.resetFields();
        },
        addUser(){
            this.$refs.addFormRef.validate(async valid =>{
               if(valid){
                const{data:res} =  await this.$http.post("addUser",this.addForm)
               }else{
                    return this.$message("操作失败","error")
               }
               this.$message("操作成功......","success")
               this.addDialogVisible = false;//关闭添加页面
               this.getUserList();//刷新数据
            });
        },
   async showEditDialog(id){//显示修改对话框
      const{data:res} = await this.$http.get("getUserMessage?id="+id);
      this.editUserForm = res; //将查询到的用户信息反填到编辑表单中
      this.editDialogVisible = true; //开启编辑表单
    },
    editDialogClose(){//监听编辑用户的操作。关闭窗口
            this.$refs.editFormRef.resetFields(); //关闭窗口重置信息
        }, 
    editUser(){//确认修改
        this.$refs.editFormRef.validate(async valid =>{
            alert(this.editUserForm)
            if(valid){//发起修改请求
                var qs = require('qs'); //处理后台接收json数据为空的异常
                const{data:res} =  await this.$http.post('updateUserMessage', qs.stringify(this.editUserForm));
                if(res == "success"){
                    this.editDialogVisible = false; //关闭添加页面
                    this.getUserList();//刷新数据
                    this.$message("操作成功......","success");
                }else return this.$message("操作失败......","error")
            }else return this.$message("用户信息验证失败","error")
        });
    },
    async deleteUserInfo(id){ //根据主键删除用户
       const confirmResult = await this.$confirm("确定永久删除该用户吗? 是否继续?","提示",{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        }).catch(err => err)
        if(confirmResult !='confirm'){
            return this.$message("已取消删除......","success");
        }else{
            const{data:res} =  await this.$http.delete("deleteUser?id="+id)
         if(res == "success"){
            this.$message("删除成功......","success");
            this.getUserList();//刷新数据
         }else{
             return this.$message("删除失败......","error");
         }
        }
    },//修改用户权限
    editAuthen(){
        alert("修改用户权限......")
    }
 }
}
</script>
<style lang="less" scoped>
.el-breadcrumb{//面包屑样式
    margin-bottom: 15px;
    font-size: 12px;
}
.el-card{/* 卡片区!important 提高样式级别  */
    box-shadow: 0 1px rgba(207, 161, 10, 0.15) !important;
}
.el-table{
    display: block;
    text-align: center;
    .el-form{
        text-align: center;
        .el-table-column{
            width: 10%;
            text-align: center;
        }
    }
}
</style>